Extrayez automatiquement 4 à 12 couleurs dominantes d’une image et générez les valeurs HEX/RGB/HSL, le contraste WCAG, des variables CSS, une palette PNG et un dégradé CSS basé sur les couleurs extraites Dans le navigateur uniquement pour vous.
JPG, PNG, WebP, GIF, SVG et autres images lisibles par votre navigateur
/* Le code CSS s’affichera après l’extraction de la palette. */
Un extracteur de palette résume les pixels échantillonnés ; il ne sait pas quel objet de la photographie est sémantiquement important. De bons résultats proviennent du choix d'un nombre de couleurs, d'une précision d'échantillonnage et d'une référence de contraste appropriés, puis du traitement de la palette et du dégradé générés comme des points de départ de la conception plutôt que comme une vérité absolue.
Quatre à six couleurs produisent souvent une palette d'interface utilisateur plus claire, tandis que des nombres plus importants préservent davantage les accents des photographies complexes. Si les échantillons voisins semblent presque identiques, réduisez le nombre de couleurs ou augmentez la précision de l'échantillonnage au lieu de conserver les tons redondants.
Un échantillonnage plus dense peut capturer de petits accents mais nécessite plus de travail de navigation. Un échantillonnage plus rapide est approprié pour les grandes images ou une exploration rapide. Réexécutez avec un réglage plus fin lorsqu'il manque une couleur petite mais importante.
Une couleur qui semble claire sur un arrière-plan peut ne pas présenter de contraste d'accessibilité sur un autre. Utilisez la référence de contraste comme guide, puis vérifiez les combinaisons de texte et d'interface utilisateur avec la taille, l'épaisseur et l'arrière-plan réels du premier plan utilisés dans la conception finale.